<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css" integrity="sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=" crossorigin="anonymous">
    <link href="../css/popup.css" rel="stylesheet" type="text/css">
    <title>QQ空间导出助手</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js" integrity="sha256-qo0Cam4XJ0QQ06XnCiCFYBh3GDXU45j3lpUp+em2yBU=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/i18n/defaults-zh_CN.min.js" integrity="sha256-zHB2UnROJx8/VorUnkT+nsUKnTsZ7HemVEqeMyOZp/Q=" crossorigin="anonymous"></script>
</head>

<body>
    <div>
        <h5>QQ空间导出助手</h5>
        <hr>
        <details>
            <summary>使用说明</summary>
            <div class="container">
                <ul class="list-unstyled">
                    <li>1.根据自身情况【<a id="openOptions" href="#">配置</a>】助手</li>
                    <li>2.点击开始备份开始收集数据</li>
                    <li>3.等待数据收集完成</li>
                    <li>4.点击【打包下载】按钮</li>
                    <li>5.等待下载完成</li>
                    <li>6.选择文件保存位置</li>
                    <li>7.点击【查看备份】</li>
                    <li>8.下载工具为第三方下载工具的，请自行解压ZIP包与文件下载文件夹合并</li>
                </ul>
            </div>
        </details>
        <hr>
        <p>登录QQ：<span title="当前登录的QQ号" style="color: red" id="loginUin"></span></p>
        <p>备份QQ：<span title="当前备份的QQ号，个人模式时为自己的QQ号，他人模式时为他人的QQ号" style="color: red" id="targetUin"></span></p>
        <p>当前模式：<span title="个人模式：访问的是自己的QQ空间，他人模式，访问的是他人的QQ空间" style="color: red" id="userType"></span></p>
        <hr>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Messages" name="exportType" value="Messages" checked>
            <label class="custom-control-label" for="Messages">说说</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Blogs" name="exportType" value="Blogs" checked>
            <label class="custom-control-label" for="Blogs">日志</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Diaries" name="exportType" value="Diaries" checked>
            <label class="custom-control-label" for="Diaries">私密日记</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Photos" name="exportType" value="Photos" checked>
            <label class="custom-control-label" for="Photos">相册</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Videos" name="exportType" value="Videos" checked>
            <label class="custom-control-label" for="Videos">视频</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Boards" name="exportType" value="Boards" checked>
            <label class="custom-control-label" for="Boards">留言板</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Friends" name="exportType" value="Friends" checked>
            <label class="custom-control-label" for="Friends">好友</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Favorites" name="exportType" value="Favorites" checked>
            <label class="custom-control-label" for="Favorites">收藏夹</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Shares" name="exportType" value="Shares" checked>
            <label class="custom-control-label" for="Shares">分享</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Visitors" name="exportType" value="Visitors" checked>
            <label class="custom-control-label" for="Visitors">访客</label>
        </div>
        <div class="container" style="margin-top: 10px">
            <div id="export_albums_div" class="form-group row" style="display: none;">
                <label for="export_albums" class="col-sm-1 col-form-label">相册列表：</label>
                <div class="col-sm-2">
                    <select id="export_albums" class="form-control selectpicker" data-live-search="true" multiple title="请选择相册" data-live-search-placeholder="搜索相册" data-actions-box="true" data-selected-text-format="count > 3">
                        <optgroup label="分类">
                            <option value="1">相册一</option>
                            <option value="2">相册二</option>
                            <option value="3">相册三</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
        <span id="diaries_tip" class="text-muted row ml-1" style="display: none;">私密日记已开启独立密码认证，请先<a id='diaries_close' target="_blank" style="color: red;">关闭</a></span>
        <span id="download_tools_tip" class="text-muted row ml-1">当前文件下载工具为
            <a id="download_tool_tip" class="download_tool_tip" href="javascript:void(0)" target="_blank">助手内部</a>
        </span>
        <span id="download_help_tip" class="text-muted row ml-1">
            <span id="download_help_reson">内部下载，限制较多已淘汰</span>， <a id='download_help_suggestion' class="download_tool" target="_blank">点击这里更换下载工具</a>
        </span>
        <div class="text-center mt-3">
            <button id="backup" type="button" class="btn btn-primary">开始备份</button>
        </div>
    </div>
	<script src="../js/utils.js"></script>
    <script src="../js/popup.js"></script>
</body>

</html>